<script setup>
import { ref } from 'vue';
const value2 = ref('')
	; (function () {
		// let token = localStorage.getItem('token');
		// if (token && token !== undefined) {
		//     getMapList();
		//     getFireList()
		// }
	})()
</script>
<template>
	<div class="record_box_scoped">
		<div class="recordTitle">值班情况</div>
		<div class="recordInfo">
			<div>
				<p>值班日期</p>
				<div>2012年01月01日</div>
			</div>
			<div>
				<p>时段</p>
				<div>
					<el-date-picker v-model="value2" type="datetimerange" start-placeholder="开始时间"
						end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
						time-format="A hh:mm:ss" />
				</div>
			</div>
			<div>
				<p>值班员</p>
				<div>时段</div>
			</div>
		</div>
		<div class="recordTitle">火灾报警控制器运行情况</div>
		<div class="recordInfo">
			<div>
				<div>火灾报售控制器运行情况</div>
				<div style="width:80%">
					<el-input placeholder="Please input"></el-input>
				</div>
			</div>
			<div>
				<div>报售、故障部位</div>
				<div style="width:80%">
					<el-input placeholder="Please input"></el-input>
				</div>
			</div>
			<div style="align-items: flex-start;padding-top:10px">
				<div>原因及处理情况</div>
				<div style="width:80%">
					<el-input rows="3" :autosize="{ minRows: 4, maxRows: 4 }" type="textarea"
						placeholder="Please input"></el-input>
				</div>
			</div>
		</div>
		<div class="recordTitle">控制室内其他消防系统运行情况</div>
		<div class="recordInfo">
			<div>456</div>
			<div>456</div>
			<div>456</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.record_box_scoped {
	box-sizing: border-box;
	width: calc(100vw);
	height: calc(100vh);
	padding: 15px;
	border: 1px solid rgb(193, 194, 196);
	background-color: rgb(240, 241, 245);

	.recordTitle {
		font-size: 18px;
		margin-bottom: 8px;
		font-weight: 700;
	}

	.recordInfo {
		margin-bottom: 12px;
		background-color: rgb(255, 255, 255);
		border-radius: 10px;

		&>div {
			padding: 15px 15px;
			border-bottom: 1px solid rgb(213, 216, 222);
			display: flex;
			align-items: center;
			justify-content: space-between;

			&:last-child {
				border-bottom: none;
			}
		}
	}
}
</style>
